<!--
 * @Author: sjt
 * @Date: 2022-09-20 09:48:41
 * @LastEditors: sjt
 * @LastEditTime: 2024-10-22 08:55:25
 * @Description: file content
 * @FilePath: \易拓\saijia-screen\src\views\Home.vue
-->
<template>
  <div class="wrap">
    <Header />
    <div class="wrap-content">
      <router-view></router-view>
    </div>
    <div class="wrap-left"></div>
    <div class="wrap-right"></div>
    <div class="wrap-footer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from '@vue/runtime-core'
import Header from '@/components/Header.vue'
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
let route = useRoute()

let { ctx: that, proxy } = getCurrentInstance()
onMounted(() => {
  const viewWidth = document.body.offsetWidth
  document.documentElement.style.zoom = viewWidth / 1920
  window.addEventListener('resize', () => {
    document.documentElement.style.zoom = viewWidth / 1920
  })
  function receiveMessage () {
    window.vuplex.addEventListener('message', (e) => {
      let rData = JSON.parse(e.data)
      if (rData.type === 'EnterBuildFloor') {
        router.push({
          name: 'page_2',
        })
      }
      if (rData.type === 'EnterEarthView') {
        router.push({
          name: 'page_1',
        })
      }
    })
  }
  if (window.vuplex) {
    receiveMessage()
  } else {
    window.addEventListener('vuplexready', receiveMessage)
  }
})
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url('@/assets/images/page2/wrap-bg.png') no-repeat;
  background-size: 100% 100%;
  &-content {
    height: 88%;
    width: 96%;
    position: absolute;
    z-index: 66;
    top: 8%;
    left: 2%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

  .wrap-left {
    height: 100%;
    width: 30%;
    position: absolute;
    pointer-events: none;
    top: 0;
    background: url('@/assets/images/page1/body-left-bg.png') no-repeat;
    background-size: auto 100%;
  }

  .wrap-right {
    height: 100%;
    width: 30%;
    position: absolute;
    right: 0;
    z-index: 3;
    pointer-events: none;
    top: 0;
    background: url('@/assets/images/page1/body-right-bg.png') no-repeat;
    background-size: auto 100%;
    background-position: center right;
  }

  .wrap-footer {
    height: 4.75%;
    width: 100%;
    position: absolute;
    z-index: 3;
    pointer-events: none;
    bottom: 0;
    background: url('@/assets/images/page1/wrap-footer.png') no-repeat;
    background-size: auto 100%;
    background-position: center;
  }
}
</style>
